<template>
	<view :class="{borderShow:isBorader}">
		<view class='hotList' v-if="likeInfo.length">
			<view class='hot-bg'>
				<view class='title acea-row row-between-wrapper'>
					<view class='text line1'>
						<text class='label'>{{titleInfo[0].val}}</text>
						{{titleInfo[1].val}}
					</view>
					<view class='more' hover-class="none" @click="gopage('/pages/columnGoods/HotNewGoods/index?type=2')">
						更多
						<text class="iconfont icon-jiantou"></text>
					</view>
				</view>
			</view>
			<view class='list acea-row row-middle'>
				<block v-for="(item,index) in likeInfo" wx:key='index'>
					<view class='item' @click="gopage('/pages/goods_details/index?id='+item.id)">
						<view class='pictrue'>
							<image :src='item.image'></image>
							<image v-if="index == 0"  src='/static/images/one.png' class='numPic'></image>
							<image v-else-if="index == 1" src='/static/images/two.png' class='numPic'></image>
							<image v-else-if="index == 2" src='/static/images/three.png' class='numPic'></image>
						</view>
						<view class='name line1'>{{item.store_name}}</view>
						<view class='money font-color'>
							￥
							<text class='num'>{{item.price}}</text>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp()
	import { mapState} from 'vuex'
	import { goPage } from '@/libs/order.js'
	export default{
		name:'h_popular',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			activeName: {
				type: String,
				default: ''
			}
		},
		computed: {
			...mapState({
		    datas:state=>state.indexData.indexDatas
		  })
		},
		watch:{
			'datas': {
					handler (nVal, oVal) {
							this.likeInfo = nVal.likeInfo
					},
					deep: true
			},
			activeName: {
				handler(nVal, oVal) {
					if (nVal == this.name && app.globalData.isIframe) {
						this.isBorader = true
					} else {
						this.isBorader = false
					}
				},
				deep: true
			}
		},
		mounted() {
			if(this.datas.likeInfo){
				this.likeInfo =this.datas.likeInfo 
			}
			
		},
		data(){
			return {
				likeInfo:[],
				titleInfo:this.dataConfig.titleInfo.list[0].chiild,
				isBorader:false,
				name: this.$options.name
			}
		},
		methods:{
			gopage(url){
				goPage().then(res=>{
					uni.navigateTo({
						url:url
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.hotList .hot-bg{width:100%;height:215rpx;background-image:url('');background-repeat:no-repeat;background-size:100% 100%;padding:0 30rpx;box-sizing:border-box;font-size:24rpx;color:#fff;margin-top:15rpx;}
	.hotList .hot-bg .title{height:87rpx;}
	.hotList .hot-bg .title .text{width:575rpx;}
	.hotList .hot-bg .title .text .label{font-size:30rpx;font-weight:bold;margin-right:20rpx;}
	.hotList .hot-bg .title .more{font-size:26rpx;}
	.hotList .hot-bg .title .more .iconfont{font-size:25rpx;vertical-align:2rpx;
	margin-left:10rpx;}
	.hotList .list{width:690rpx;height:330rpx;border-radius:20rpx;background-color:#fff;margin:-128rpx auto 0 auto;padding:0 22rpx;box-sizing:border-box;box-shadow: 0 0 30rpx -10rpx #aaa;}
	.hotList .list .item{width:200rpx;}
	.hotList .list .item~.item{margin-left:22rpx;}
	.hotList .list .item .pictrue{width:100%;height:200rpx;position:relative;}
	.hotList .list .item .pictrue image{width:100%;height:100%;border-radius:10rpx;}
	.hotList .list .item .pictrue .numPic{width:50rpx;height:50rpx;border-radius:50%;position:absolute;top:7rpx;left:7rpx;}
	.hotList .list .item .name{font-size:26rpx;color:#282828;margin-top:12rpx;}
	.hotList .list .item .money{font-size:20rpx;font-weight:bold;margin-top:4rpx;}
	.hotList .list .item .money .num{font-size:28rpx;}
</style>
